<template>
  <div class="aitMainInfo marginBottom15">
    <div class="info_containerPadding info_containerBacInfoStyle">
      <h1 class="mainTitleFont">空气质量</h1>
      <AirAnimate :AirAnimateObj="airAnimateObj" />
      <div class="airQtInfo">
        <AirQtInfo
          v-for="(item, index) in airQtInfoData"
          :key="index"
          :airQtInfoNum="item"
          :airQtInfoTitle="index"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
//
import AirAnimate from "../../common/airAnimate/AirAnimate";
import AirQtInfo from "../../common/airQtInfo/AirQtInfo";
export default {
  name: "AirMainInfo",
  components: {
    AirAnimate,
    AirQtInfo,
  },
  computed: {
    ...mapState(["current_air"]),
    airAnimateObj() {
      let { aqi, category } = this.current_air;
      return { aqi, category };
    },
    airQtInfoData() {
      let { co, no2, o3, pm2p5, pm10, so2 } = this.current_air;
      return { co, no2, o3, pm2p5, pm10, so2 };
    },
  },
};
</script>

<style scoped>
.aitMainInfo {
  width: 100%;
  height: auto;
}
.airQtInfo {
  padding: 0.13rem 0.16rem;
  display: flex;
  width: 100%;
  height: auto;
  margin-top: 0.35rem;
  background-color: #ebedf0;
  border-radius: 0.16rem;
}
</style>